<template>
  <body id="div_0">
  <div class="article">
    <PageHeader mode="white"></PageHeader>
    <el-row>
      <el-col class="title-block" :span="12">
        <div class="title-text">
          {{ articleDetails.paper_title }}
        </div>
        <div class="sub-title">
          <span v-for="(author, index) in articleDetails.authors" :key="index">
            <span class="_link">
              {{ author.author_name }}
              <!--              <sup v-if="articleDetails.author_affiliation && author.affiliation_order !== 0">{{ author.affiliation_order }}</sup>-->
            </span>
            <span v-if="articleDetails.authors.length > index + 1">,&nbsp;</span>
          </span>
        </div>
        <!--<div class="sub-title" v-if="articleDetails.author_affiliation">
          <span v-for="(ins, index) in articleDetails.author_affiliation" :key="index">
            <span>
              <sup>{{ index+1 }}</sup>
              {{ ins }}
            </span>
            <span v-if="articleDetails.author_affiliation.length > index + 1">,&nbsp;</span>
          </span>
        </div>-->
        <div class="sub-title">
          <span class="date" v-if="articleDetails.year">{{ articleDetails.year }}</span>
          <!--          <span class="journal" v-if="articleDetails.journal_id!==''">-->
          <!--            &nbsp;{{ articleDetails.journal.name }}-->
          <!--            <span v-if="articleDetails.volume"> | Volume: {{ articleDetails.volume }}</span>-->
          <!--            <span v-if="articleDetails.first_page">, pp {{ articleDetails.first_page }}</span>-->
          <!--            <span v-if="articleDetails.last_page">-{{ articleDetails.last_page }}</span>-->
          <!--          </span>-->
        </div>
        <div class="sub-title" v-if="articleDetails.doi">
          <span class="_info">DOI: <span class="_link" @click="toDOI(articleDetails.doi)">{{ articleDetails.doi }}</span></span>
        </div>
        <div style="text-align: left; padding-left: 20px; margin-top: 10px; height: 20px">
          <div style="width: 90px; float: left">点赞数&ensp;<span style="font-weight: bold;">{{this.like_num}}</span></div>
          <div style="width: 90px; float: left">收藏数&ensp;<span style="font-weight: bold;">{{this.collect_num}}</span></div>
          <div style="width: 90px; float: left">评论数&ensp;<span style="font-weight: bold;">{{ toBigNum(this.comments.length) }}</span></div>
<!--          <div style="width: 90px; float: left">引用数&ensp;<span style="font-weight: bold;">{{ articleDetails.reference_count }}</span></div>-->
<!--          <div style="width: 90px; float: left">被引数&ensp;<span style="font-weight: bold;">{{ articleDetails.citation_count }}</span></div>-->
        </div>
        <div class="title-button">
          <el-tooltip v-if="if_article_like===false" class="item" effect="light" content="点赞" placement="bottom">
            <el-button icon="el-icon-check" circle @click="article_like"></el-button>
          </el-tooltip>
          <el-tooltip v-else class="item" effect="light" content="取消点赞" placement="bottom">
            <el-button type="primary" icon="el-icon-check" circle @click="article_like_cancel"></el-button>
          </el-tooltip>
          <el-tooltip v-if="if_article_collect===false" class="item" effect="light" content="收藏" placement="bottom">
            <el-button icon="el-icon-star-off" circle @click="openCollect"></el-button>
          </el-tooltip>
          <el-tooltip v-else class="item" effect="light" content="取消收藏" placement="bottom">
            <el-button type="primary" icon="el-icon-star-off" circle @click="cancelCollect"></el-button>
          </el-tooltip>
          <el-tooltip class="item" effect="light" content="预览" placement="bottom">
            <el-button icon="el-icon-download" circle @click="download"></el-button>
          </el-tooltip>
          <el-tooltip class="item" effect="light" content="分享" placement="bottom">
            <el-button icon="el-icon-share" circle @click="share"></el-button>
          </el-tooltip>
<!--          <el-tooltip class="item" effect="light" content="引用" placement="bottom">-->
<!--            <el-button icon="el-icon-collection-tag" circle @click="quote"></el-button>-->
<!--          </el-tooltip>-->
          <!--<el-dropdown style="margin-left: 10px; margin-right: 10px" trigger="click" @command="goLink">
            <el-tooltip class="item" effect="light" content="更多链接" placement="bottom">
              <el-button type="success" icon="el-icon-paperclip" circle></el-button>
            </el-tooltip>
            <el-dropdown-menu slot="dropdown">
              <el-dropdown-item v-for="(ins, index) in articleDetails.urls" v-bind:key="index" :command="ins">{{ ins }}</el-dropdown-item>
            </el-dropdown-menu>
          </el-dropdown>-->
        </div>
      </el-col>
      <!--      <el-col :span="7" class="logo-div">LOGO</el-col>-->
    </el-row>

    <el-row>
      <el-col :span="15" style="width: 85%; text-align: center">
        <div class="abstract-div">
          <div class="abstract-title">摘要</div>
          <div v-if="articleDetails.abstract && articleDetails.abstract.length>0">
            <div class="abstract-content _content" v-if="articleDetails.abstract.length<spanLength || isSpan">
              {{ articleDetails.abstract }}
              <span v-if="isSpan && articleDetails.abstract.length>=spanLength" class="_link" @click="isSpan=!isSpan"> 折叠</span>
            </div>
            <div class="abstract-content _content" v-else>
              {{ articleDetails.abstract.substring(0, 570) }}...
              <span v-if="!isSpan" class="_link" @click="isSpan=!isSpan"> 展开</span>
            </div>
          </div>
          <div v-else>
            <div class="abstract-content _content" style="color: #909eb4; font-size: 14px">暂无摘要信息</div>
          </div>
        </div>

        <div class="detail-div">
          <div class="AnswerIt">
            <el-input
                type="textarea"
                maxlength="500"
                show-word-limit
                :autosize="{ minRows: 3, maxRows: 6}"
                placeholder="留下你的评论吧"
                v-model="myAnswer"
            >
            </el-input>
            <div style="width: 100%; text-align: right">
              <el-button type="primary" style="margin-top: 10px;" @click="createComment(articleDetails.paper_id,myAnswer)">发布</el-button>
            </div>
          </div>
          <p></p>
          <div class="reference-info" v-if="comments===null||comments.length===0">
            <span style="font-size: 20px">暂无评论</span>
          </div>
          <div class="comment-card" v-else>
            <div style="font-size: 27px; font-weight: bold; color: black; text-align: left">&ensp;{{comments.length}} 条评论</div>
            <p></p>
            <el-card shadow="hover" class="comment-card-body"
                     v-for="(comment, index) in comments" v-bind:key="index">
              <el-row class="comment-info">
                <el-col :span="18" style="text-align: left">&ensp;&ensp;
                  <span class="_link2" @click="toAuthor(-1)">{{ comment.user_name }}</span>
                </el-col>
                <!--<el-col :span="5">
                  <span style="font-size: 14px; float: right" class="_info">&ensp;&ensp;赞&ensp;</span>
                  <span style="font-size: 14px; float: right" class="_link _bd_right" @click="toComment(comment.id)">查看详情&ensp;&ensp;</span>
                </el-col>
                <el-col :span="1">
                  <div v-bind:class="{'dislike' : !comment.is_like, 'like' : comment.is_like, 'is_animating' : isAnimating}" @click="likeClick(comment)"></div>
                </el-col>-->
              </el-row>
              <el-row style="text-align: left; font-size: 15px">
                {{ comment.content }}
              </el-row>
              <span class="comment-date _info" >
                        {{ $dateFormat(comment.time, "yyyy / MM / dd") }}&ensp;&ensp;
<!--                      <el-button style="color: #909eb4" type="text" icon="el-icon-check" @click="likeClick(comment)">点赞</el-button>-->
                      {{ comment.like }}
                <!--<el-button style="color: #909eb4" type="text" icon="el-icon-edit" @click="toComment(comment.id)">回复</el-button>
                {{ comment.reply_count }}
                <el-button style="color: #909eb4" type="text" icon="el-icon-zoom-in" @click="toComment(comment.id)">查看详情</el-button>-->
                  </span>
            </el-card>
          </div>
        </div>
      </el-col>

      <!--<el-col :span="9">
        <div class="info-div">
          <el-row class="digit _bd_bottom">
            <el-col :span="6" class="digit-num" style="color: black">
              {{ articleDetails.reference_count }}
              <div class="digit-text">引用量</div>
            </el-col>
            <el-col :span="6" class="digit-num" style="color: black">
              {{ articleDetails.citation_count }}
              <div class="digit-text" >被引量</div>
            </el-col>
            <el-col :span="6" class="digit-num" style="color: black">
              {{ toBigNum(articleDetails.collect_count) }}
              <div class="digit-text">收藏数</div>
            </el-col>
            <el-col :span="6" class="digit-num" style="color: black">
              {{ toBigNum(this.comments.length) }}
              <div class="digit-text">评论数</div>
            </el-col>
          </el-row>
          <div style="text-align: left; height: 40px">
            <div style="height: 20px"></div>
          </div>
          <el-row class="field _bd_bottom" v-if="articleDetails.fields">
            <div class="field-title">专题</div>
            <div class="field-content" v-for="(field, index) in articleDetails.fields" :key="index">
              -&ensp;<span class="_link" @click="toField(field.name)">{{ field.name }}</span>
            </div>
          </el-row>
          <el-row class="relation" v-if="related_papers.length>0">--> <!-- 假借 -->
      <!--<div class="field-title">相关文献</div>
      <div class="relation-article" v-for="(article, index) in related_papers" :key="index">
        <div class="relation-title">
          <span class="_link" @click="toArticle(article.paper_id)">{{ article.paper_title }}</span>
        </div>
        <div class="relation-author _info">
          <span v-for="(author, index2) in article.authors" :key="index2">
            <span v-if="index2<2">{{ author.author_name }}</span>
            <span v-if="index2<2 && article.authors.length > index2 + 1">,&nbsp;</span>
          </span>
          <span v-if="article.authors.length > 2">etc.</span>
        </div>
      </div>
    </el-row>
  </div>
</el-col>-->
    </el-row>

    <CollectDialog
        :curPaper="articleDetails"
        :showCollect="showCollect"
        @collectSuccess="collectSuccess"
        @closeChildDialog="closeChildDialog"></CollectDialog>

    <CiteDialog
        :paper_id="articleDetails.paper_id"
        :showQuote="showQuote"
        @closeChildDialog="closeChildDialog"></CiteDialog>
  </div>
  </body>
</template>

<script>
import user from "../../store/user";
import qs from "qs";
import CiteDialog from "../../components/CiteDialog";
import CollectDialog from "../../components/CollectDialog";
import PageHeader from "@/components/PageHeader";

export default {
  name: "Article",
  components: {PageHeader, CiteDialog, CollectDialog},
  data() {
    return {
      if_article_like: false,//是否点赞
      like_num: 0,//点赞数
      if_article_collect: false,//是否点赞
      collect_num: 0,//点赞数
      // 引用
      showQuote: false,

      // 收藏
      showCollect: false,

      // 点赞动画
      like: false,
      isAnimating: false,

      // 摘要展开
      isSpan: false,
      spanLength: 600,

      // 标签页
      activeDetail: "first",

      myAnswer: '',

      comments: [
        {
          id: 1,
          like: 1,
          is_like: false,
          is_animating: false,
          reply_count: 0,
          time: "",
          user_id: 0,
          username: "",
          content: "",
        }
      ],

      article_content: {
        achievement_id: '',
        name: '',
        author_id: '',
        intro: '',
        url: '',
        type: '',
        area: '',
        create_time: '',
      },

      articleDetails: {
        author_affiliation: [
          "University of Warsaw",
          "Facebook",
          "Salesforce.com",
          "University of Washington",
          "Nvidia",
          "Mario Negri Institute for Pharmacological Research",
          "University of Oxford",
          "ETH Zurich",
          "Stanford University",
          "Twitter",
          "Tsinghua University"
        ],
        authors: [
          {
            affiliation_id: "4654613",
            affiliation_name: "",
            affiliation_order: 1,
            author_id: "2411226248",
            author_name: "Adam Paszke",
            order: "1"
          },
          {
            affiliation_id: "4654613",
            affiliation_name: "",
            affiliation_order: 1,
            author_id: "2411226248",
            author_name: "Adam Paszke",
            order: "2"
          },
          {
            affiliation_id: "4654613",
            affiliation_name: "",
            affiliation_order: 1,
            author_id: "2411226248",
            author_name: "Adam Paszke",
            order: "3"
          },
        ],
        fields: [
          {
            fields_id: "123123",
            name: "Computer Vision"
          }
        ],
        citation_count: 8,
        collect_count: 16,
        doi: "10.1051/epjconf/202024507021",
        paper_id: "9782951d43920382d2f1229601d018ca87df4dcb",
        journal: "EPJ Web of Conferences",
        publisher: "Elsevier BV",
        conference: "",
        abstract: "The Centralised Elasticsearch Service at CERN runs the infrastructure to provide Elasticsearch clusters for more than 100 different use cases.This contribution presents how the infrastructure is managed, covering the resource distribution, instance creation, cluster monitoring and user support. The contribution will present the components that have been identified as critical in order to share resources and minimise the amount of clusters and machines needed to run the service. In particular, all the automation for the instance configuration, including index template management, backups and visualisation settings, will be explained in detail.",
        pdfs: [
          "https://www.pap.es/files/1116-877-pdf/990.pdf"
        ],
        urls: [
          "https://dialnet.unirioja.es/servlet/articulo?codigo=2946216",
          "https://www.redalyc.org/articulo.oa?id=366638709014",
          "https://medes.com/publication/46160",
          "http://www.pap.es/files/1116-877-pdf/990.pdf",
          "http://www.redalyc.org/pdf/3666/366638709014.pdf"
        ],
        citation_msg: [
          {
            authors: [
              {
                author_id: "2772667878",
                author_name: "Sepp Hochreiter",
              },
              {
                author_id: "2772667878",
                author_name: "Jürgen Schmidhuber",
              }
            ],
            citation_count: 1,
            id: "d884573116a4363256d52575a4dd642f3b5b6f24",
            journalName: "EPJ Web of Conferences",
            abstract: "In early 2016 CERN IT created a new project to consolidate and centralise Elas-ticsearch instances across the site, with the aim to offer a production quality new IT services to experiments and departments. We present the solutions we adapted for securing the system using open source only tools, which allows us to consolidate up to 20 different use cases on a single Elasticsearch cluster.",
            reference_count: 2,
            paper_title: "Securing and sharing Elasticsearch resources with Read-onlyREST",
            year: 2019
          },
        ],
        related_papers: [
          {
            authors: [
              {
                author_id: "2772667878",
                author_name: "Sepp Hochreiter",
              },
              {
                author_id: "2772667878",
                author_name: "Jürgen Schmidhuber",
              }
            ],
            citation_count: 1,
            id: "d884573116a4363256d52575a4dd642f3b5b6f24",
            journalName: "EPJ Web of Conferences",
            abstract: "In early 2016 CERN IT created a new project to consolidate and centralise Elas-ticsearch instances across the site, with the aim to offer a production quality new IT services to experiments and departments. We present the solutions we adapted for securing the system using open source only tools, which allows us to consolidate up to 20 different use cases on a single Elasticsearch cluster.",
            reference_count: 2,
            paper_title: "Securing and sharing Elasticsearch resources with Read-onlyREST",
            year: 2019
          },
          {
            authors: [
              {
                author_id: "2772667878",
                author_name: "Sepp Hochreiter",
              },
              {
                author_id: "2772667878",
                author_name: "Jürgen Schmidhuber",
              }
            ],
            citation_count: 1,
            id: "d884573116a4363256d52575a4dd642f3b5b6f24",
            journalName: "EPJ Web of Conferences",
            abstract: "In early 2016 CERN IT created a new project to consolidate and centralise Elas-ticsearch instances across the site, with the aim to offer a production quality new IT services to experiments and departments. We present the solutions we adapted for securing the system using open source only tools, which allows us to consolidate up to 20 different use cases on a single Elasticsearch cluster.",
            reference_count: 2,
            paper_title: "Securing and sharing Elasticsearch resources with Read-onlyREST",
            year: 2019
          },
        ],
        reference_msg: [
          {
            authors: [
              {
                author_id: "2772667878",
                author_name: "Sepp Hochreiter",
              },
              {
                author_id: "2772667878",
                author_name: "Jürgen Schmidhuber",
              }
            ],
            citation_count: 1,
            id: "d884573116a4363256d52575a4dd642f3b5b6f24",
            journalName: "EPJ Web of Conferences",
            abstract: "In early 2016 CERN IT created a new project to consolidate and centralise Elas-ticsearch instances across the site, with the aim to offer a production quality new IT services to experiments and departments. We present the solutions we adapted for securing the system using open source only tools, which allows us to consolidate up to 20 different use cases on a single Elasticsearch cluster.",
            reference_count: 2,
            paper_title: "Securing and sharing Elasticsearch resources with Read-onlyREST",
            year: 2019
          },
          {
            authors: [
              {
                author_id: "2772667878",
                author_name: "Sepp Hochreiter",
              },
              {
                author_id: "2772667878",
                author_name: "Jürgen Schmidhuber",
              }
            ],
            citation_count: 44135,
            id: "44d2abe2175df8153f465f6c39b68b76a0d40ab9",
            journalName: "Neural Computation",
            abstract: "Learning to store information over extended time intervals by recurrent backpropagation takes a very long time, mostly because of insufficient, decaying error backflow. We briefly review Hochreiter's (1991) analysis of this problem, then address it by introducing a novel, efficient, gradient based method called long short-term memory (LSTM). Truncating the gradient where this does not do harm, LSTM can learn to bridge minimal time lags in excess of 1000 discrete-time steps by enforcing constant error flow through constant error carousels within special units. Multiplicative gate units learn to open and close access to the constant error flow. LSTM is local in space and time; its computational complexity per time step and weight is O. 1. Our experiments with artificial data involve local, distributed, real-valued, and noisy pattern representations. In comparisons with real-time recurrent learning, back propagation through time, recurrent cascade correlation, Elman nets, and neural sequence chunking, LSTM leads to many more successful runs, and learns much faster. LSTM also solves complex, artificial long-time-lag tasks that have never been solved by previous recurrent network algorithms.",
            reference_count: 42,
            paper_title: "Long Short-Term Memory",
            year: 1997
          }
        ],
        reference_count: 2,
        paper_title: "Large Elasticsearch cluster management",
        year: 2020,
      },
      related_papers: [],

      citation_msg: [],
      cita_page_idx: 1,
      loadMoreDisable: true,
    }
  },
  created(key) {
    let id
    console.log('into article~');
    id = localStorage.getItem("achievement_id");
    console.log('id = '+ id);
    this.$axios({
      method:'post',
      url:'my_app/get_achievement',
      data: qs.stringify({
        achievement_id: id,
      }),
    })
        .then(res => {
          this.created_num++;
          console.log(this.articleDetails);
          this.articleDetails = res.data.article;
          console.log(this.articleDetails);
          this.collect_num = res.data.article.collection_count;
          this.like_num = res.data.article.like_count;
          console.log("获取学术成果");
          console.log(res.data.msg);
          console.log(res.data);
        },)
    const paper_id = localStorage.getItem("achievement_id");
    const user_id = localStorage.getItem("user_id");
    console.log("paperid : "+ paper_id);
    console.log("userid : "+user_id);
    this.$axios({
      method:'post',
      url:'my_app/check_achievement',
      data: qs.stringify({
        achievement_id: paper_id,
        user_id:user_id
      }),
    }).then(res=>{
      this.created_num++;
      console.log(res.data);
      this.if_article_like = res.data.is_like;
      this.if_article_collect = res.data.is_collect;
      console.log("是否点赞" + this.if_article_like);
      console.log("是否收藏" +this.if_article_collect);
    })

    this.getComments();
  },
  watch: {
    // citation_msg(val) {
    //   this.loadMoreDisable = val.length >= this.articleDetails.citation_count;
    // },
  },
  methods: {
    article_like() {//学术成果点赞
      this.like_num++;
      this.if_article_like=true;
      console.log('------------------');
      const paper_id = localStorage.getItem("achievement_id");
      const user_id = localStorage.getItem("user_id");
      console.log("paperid : "+ paper_id);
      console.log("userid : "+user_id);
      this.$axios({
        method:'post',
        url:'my_app/like_achievement',
        data: qs.stringify({
          achievement_id: paper_id,
          user_id:user_id
        }),
      })
          .then(res => {
            if(res.data.error === '0'){
              this.$message.success("点赞成功");
            }
            else {
              this.$message.error(res.data.msg);
            }
          },)
    },
    article_like_cancel() {//学术成果取消点赞
      this.like_num--;
      this.if_article_like=false;
      const paper_id = localStorage.getItem("achievement_id");
      const user_id = localStorage.getItem("user_id");
      this.$axios({
        method:'post',
        url:'my_app/cancel_like_achievement',
        data: qs.stringify({
          achievement_id: paper_id,
          user_id:user_id
        }),
      })
          .then(res => {
            if(res.data.error === '0'){
              this.$message.success("取消点赞成功");
            }
            else {
              this.$message.error(res.data.msg);
            }
          },)
    },
    getLikenum() {//获取点赞数
      this.$axios({
        method: 'post',
        url: 'my_app/get_like_count_by_achievement',
        data: qs.stringify({
          achievement_id: paper_id,
        })
      })
          .then(res => {
            if(res.data.error === '0'){
              this.like_num=res.data.data;
              this.if_article_like=res.data.has_like;
            }
            else {
              this.$message.error(res.data.msg);
            }
          },)
    },
    goLink(url) {
      window.open(url);
    },
    collectSuccess() {
      this.articleDetails.collect_count += 1;
    },
    closeChildDialog() {
      this.showQuote = false;
      this.showCollect = false;
    },
    createComment(paper_id, content) {
      const user_id =  localStorage.getItem("user_id");
      const achievement_id = localStorage.getItem("achievement_id");
      if (content === '') {
        this.$message.warning('无法发布空白评论！');
        return;
      }

      this.$axios({
        url: 'my_app/comment_achievement',
        method: 'post',
        data: qs.stringify({
          user_id: user_id,
          achievement_id:achievement_id,
          content:content
        })
      })
          .then(res => {
            switch (res.data.error) {
              case 0:
                this.$message.success("评论成功！");
                this.myAnswer = '';
                //this.comments = res.data.data.comments;
                break;
              default:
                console.log(res.data.msg);
            }
          })
          .catch(err => {
            console.log(err);
          })
      this.$router.push('/empty');
    },
    toArticle: function(paper_id) {
      let routeUrl = this.$router.resolve({
        path: '/article',
        query: { v: paper_id }
      });
      window.open(routeUrl .href, "_self");
    },
    toAuthor: function(id) {
      let routeUrl = this.$router.resolve({
        path: '/schPortal',
        query: { v: id }
      });
      window.open(routeUrl .href, "_self");
    },
    toDOI: function(doi) {
      window.open("https://doi.org/" + doi);
    },
    toComment: function(id) {
      let routeUrl = this.$router.resolve({
        path: '/commentDetail',
        query: { v: id }
      });
      window.open(routeUrl .href, "_blank");
    },
    toField: function(field_name) {
      let routeUrl = this.$router.resolve({
        path: '/searchRes',
        query: { field: field_name }
      });
      window.open(routeUrl .href, "_self");
    },
    toBigNum: function(num) {
      if (num>=10000) {
        let ten_thousand = Math.floor(num/10000)
        let thousand = Math.floor(num%10000/1000)
        num = ten_thousand + "." + thousand + "w"
      }
      else if (num>=1000) {
        let thousand = Math.floor(num/1000)
        let hundred = Math.floor(num%1000/100)
        num = thousand + "." + hundred + "k"
      }
      return num
    },
    likeClick: function(commentIns) {
      const userInfo = user.getters.getUser(user.state());
      if (!userInfo) {
        this.$message.warning("请先登录！");
        setTimeout(() => {
          this.$router.push('/login');
        }, 500);
        return;
      }

      if (!commentIns.is_like)
        this.likeHandler(commentIns, 'comment');
      else
        this.likeHandler(commentIns, 'cancel');
    },
    likeHandler: function(commentIns, tag) {
      const userInfo = user.getters.getUser(user.state());
      this.$axios({
        url: '/social/like/' + tag,
        method: 'post',
        data: qs.stringify({
          user_id: userInfo.user.userId,
          comment_id: commentIns.id,
        })
      })
          .then(res => {
            switch (res.data.status) {
              case 200:
                commentIns.is_animating = tag === 'comment';
                setTimeout(() => {
                  commentIns.is_like = !commentIns.is_like;
                }, 800);
                break;
              case 403:
                this.$message.error("评论不存在，请刷新重试！");
                break;
            }
          })
          .catch(err => {
            console.log(err);
          })
    },
    share(message) {
      let aux = document.createElement("input");
      aux.setAttribute("value", this.articleDetails.url);
      document.body.appendChild(aux);
      aux.select();
      document.execCommand("copy");
      document.body.removeChild(aux);
      if (message !== null) {
        this.$message.success("链接已复制至剪贴板");
      } else {
        this.$message.error("链接复制失败");
      }
    },
    quote() {
      this.showQuote = true;
    },
    openCollect() {
      this.collect_num++;
      this.if_article_collect = true;
      //this.showCollect = true;
      let achievement_id = localStorage.getItem("achievement_id");
      let user_id = localStorage.getItem("user_id");
      let _this = this;
      this.$axios({
        method: 'post',
        url: 'my_app/collect_achievement',
        data: qs.stringify({
          achievement_id:achievement_id,
          user_id:user_id
        })
      })
          .then(res => {
            switch (res.data.error){
              case "0":_this.$message.success(res.data.msg); break;
              default: _this.$message.warning(res.data.msg);break;
            }

            console.log(res.data.msg);
            console.log(res.data);
          })
    },
    cancelCollect() {
      this.collect_num--;
      this.if_article_collect = false;
      //this.showCollect = true;
      let achievement_id = localStorage.getItem("achievement_id");
      let user_id = localStorage.getItem("user_id");
      let _this = this;
      this.$axios({
        method: 'post',
        url: 'my_app/cancel_collect_achievement',
        data: qs.stringify({
          achievement_id:achievement_id,
          user_id:user_id
        })
      })
          .then(res => {
            switch (res.data.error){
              case "0":_this.$message.success(res.data.msg); _this.showCollect = false;break;
              default: _this.$message.warning(res.data.msg);break;
            }

            console.log(res.data.msg);
            console.log(res.data);
          })
    },
    download() {
        const url = this.articleDetails.url;
      window.location.href = url;
      // if (this.articleDetails.pdfs.length === 0) {
      //   this.$message.error("未找到该文献原文PDF！");
      //   return;
      // }
      // this.$message.success("正在下载原文PDF，请耐心等待！");
      // console.log(this.articleDetails.pdfs[0]);
      // // TIP: 下载跨域文件出问题，让后端下载到服务器再同域下载
      // this.$axios({
      //   method: 'post',
      //   url: '/upload/get/pdf',
      //   data: qs.stringify({
      //     pdf_url: this.articleDetails.pdfs[0]
      //   })
      // })
      //     .then(res => {
      //       if (res.data.success) {
      //         console.log(this.GLOBAL.backUrl + res.data.data);
      //         this.$downloadSameArea(this.GLOBAL.backUrl + res.data.data, this.articleDetails.paper_title + ".pdf");
      //         this.$message.success("下载成功！");
      //       }
      //     })
      //     .catch(err => {
      //       this.$message.error("下载失败！");
      //       console.log(err);
      //     })
    },

    getRelatedPapers() {
      this.$axios({
        method: 'post',
        url: '/es/get/related/paper',
        data: qs.stringify({
          id: this.$route.query.v
        })
      })
          .then(res => {
            if (res.data.success) {
              this.related_papers = res.data.related;
            }
          })
          .catch(err => {
            console.log(err);
          })
    },
    getArticleDetail() {
      const _formData = new FormData();
      _formData.append("id", this.$route.query.v);
      return this.$axios({
        method: 'post',
        url: 'my_app/get_achievement',
        data: qs.stringify({
          achievement_id: paper_id
        })
      })
    },
    getCitationMsg() {
      if (this.citation_msg.length >= this.articleDetails.citation_count) {
        this.loadMoreDisable = true;
        return;
      }

      this.$axios({
        method: 'post',
        url: '/es/get/citation/paper',
        data: qs.stringify({
          id: this.$route.query.v,
          page: this.cita_page_idx,
          size: 20
        })
      })
          .then(res => {
            if (res.data.success) {
              this.citation_msg = this.citation_msg.concat(res.data.citations);
              this.cita_page_idx += 1;
              if (this.citation_msg.length >= this.articleDetails.citation_count)
                this.loadMoreDisable = true;
            } else {
              this.$message.error("获取引证文献失败！");
            }
          })
          .catch(err => {
            console.log(err);
          })
    },
    getComments() {//评论获取
      let id = localStorage.getItem("achievement_id");

      this.$axios({
        method: 'post',
        url: 'my_app/get_comment_list_by_achievement',
        data: qs.stringify({
          achievement_id: id,
        })
      }).then(res=>{
        console.log(res.data);
        this.comments = res.data.comments;
      })
    },
    getArticle() {
      let self = this;
      //let _loadingIns = this.$loading({fullscreen: true, text: '拼命加载中'});
      this.$axios.all([this.getArticleDetail(), this.getComments()])
          .then(this.$axios.spread(function (articleDetail, allComments) {
            _loadingIns.close();

            // Get Article Detail
            switch (articleDetail.data.msg) {
              case 0:
                self.articleDetails = articleDetail.data.data;
                break;
              case 1002:
                // this.$message.error("查无此文献！");
                // setTimeout(() => {
                //   this.$router.push("/");
                // }, 1500);
                break;
              case 1001:
                this.$message.error("系统发生错误，请联系管理员！");
                setTimeout(() => {
                  this.$router.push("/");
                }, 1000);
                break;
            }

            switch (allComments.data.status) {
              case 200:
                self.comments = allComments.data.data.comments;
                break;
              case 403:
                self.comments = [];
                break;
              default:
                self.$message.error("评论获取失败！");
                break;
            }
          }))
          .catch(err => {
            console.log(err);
          })
    },
  },
  /*created() {
    this.getArticle();
    this.getCitationMsg();
    this.getRelatedPapers();
    this.getLikenum();
  },*/
}
</script>

<style scoped>
#div_0{
  width: 100%;
  height: 100%;
  border: 1px #1A4BAF;
  background-image: url("../../assets/images/background8.jpg");
  background-size: cover;
  background-attachment: fixed;
}


.article .title-block {
  margin-left: 180px;
  min-height: 200px;
}
.article .abstract-div {
  background-color: white;
  margin-left: 180px;
  min-height: 200px;
  padding: 20px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, .08), 0 0 6px rgba(0, 0, 0, .04);
}
.article .detail-div {
  background-color: white;
  margin-top: 26px;
  margin-left: 180px;
  margin-bottom: 30px;
  padding: 30px;
  min-height: 400px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, .08), 0 0 6px rgba(0, 0, 0, .04);
}
.article .info-div {
  background-color: white;
  margin:0 180px 30px 36px;
  padding: 30px;
  min-height: 666px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, .08), 0 0 6px rgba(0, 0, 0, .04);
}

.article .title-text {
  font-family: Tahoma,fantasy;
  text-align: left;
  padding-top: 50px;
  padding-left: 20px;
  font-weight: bold;
  font-size: 28px;
  line-height: 40px;
  color: #353535;
}
.article .sub-title {
  text-align: left;
  padding-left: 20px;
  margin-top: 10px;
  font-size: 15px;
  color: #909eb4;
}
.article .sub-title2 {
  text-align: left;
  padding-left: 20px;
  margin-top: 10px;
}
.article .title-button {
  text-align: left;
  padding-left: 20px;
  margin-top: 15px;
  margin-bottom: 20px;
}

.article .abstract-title {
  text-align: left;
  font-weight: bold;
  margin-top: 5px;
  padding: 0 16px;
  font-size: 16px;
  color: #353535;
}
.article .abstract-content {
  text-align: justify;
  padding: 16px 16px 6px 16px;
  font-size: 15px;
  line-height: 24px;
  font-family: Georgia, fantasy;
}

.article .digit {
  margin-top: 14px;
  padding-bottom: 30px;
}
.article .digit-num {
  font-size: 26px;
}
.article .digit-text {
  margin-top: 10px;
  font-size: 14px;
  color: #909eb4;
}

.article .field {
  padding: 36px 10px;
}
.article .field-title {
  text-align: left;
  margin-bottom: 20px;
  font-weight: bold;
  font-size: 16px;
  color: #353535;
}
.article .field-content {
  text-align: left;
  font-size: 16px;
  line-height: 30px;
}

.article .relation {
  padding: 36px 10px;
  text-align: left;
  font-size: 15px;
}
.article .relation-author {
  font-size: 14px;
  margin-top: 5px;
  margin-bottom: 12px;
}

.article .reference-info {
  margin-bottom: 12px;
  color: #909eb4;
  font-size: 13px;
}
.article .reference-article-block {
  padding-top: 10px;
}
.article .reference-article-block:hover {
  background: #f4f9ff;
  cursor: pointer;
}
.article .reference-title {
  font-size: 15px;
}
.article .reference-author {
  margin-top: 5px;
  margin-bottom: 10px;
  font-size: 14px;
}
.article .reference-article-block:hover .reference-title {
  color: #1f71df;
}

.article .comment-card {
  padding: 5px;
}
.article .comment-card-body {
  margin-bottom: 20px;
}
.article .comment-info {
  padding-bottom: 15px;
}
.article .comment-date {
  font-size: 14px;

}
.article .comment-content {
  font-size: 14px;
  line-height: 24px;
}
.article .dislike {
  margin: -20px;
  cursor: pointer;
  height: 60px;
  width: 60px;
  background-image:url( 'https://img-1304418829.cos.ap-beijing.myqcloud.com/heart.png');
  background-position: left;
  background-repeat:no-repeat;
  background-size:2900%;
}
.article .like {
  margin: -20px;
  cursor: pointer;
  height: 60px;
  width: 60px;
  background-image:url( 'https://img-1304418829.cos.ap-beijing.myqcloud.com/heart.png');
  background-position: right;
  background-repeat:no-repeat;
  background-size:2900%;
}
.article .dislike:hover {
  background-position:right;
}
.article .is_animating {
  animation: heart-burst .8s steps(28) 1;
}
@keyframes heart-burst {
  from {background-position:left;}
  to { background-position:right;}
}

.article ._bd_bottom {
  border-bottom: solid 1px lightgray;
}
.article ._bd_right {
  border-right: solid 1px lightgray;
}
.article ._bd_left {
  border-left: solid 1px lightgray;
}
.article ._bd_top {
  border-top: solid 1px lightgray;
}
.article ._primary {
  color: #409EFF;
}
.article ._danger {
  color: #F56C6C;
}
.article ._warning {
  color: #E6A23C;
}
.article ._success {
  color: #67C23A;
}
.article ._info {
  color: #909eb4;
}
.article ._content {
  color: #565656;
}
.article ._link {
  color: #00b1fd;
}
.article ._link2 {
  font-weight: bold;
  padding-left: 0px;
  cursor: pointer;
}
.article ._link:hover {
  color: #38c5ff;
  cursor: pointer;
}

.article .detail-div .el-tab-pane {
  text-align: left;
}
.article .detail-div .el-tabs__item.is-active {
  color: #353535;
  font-weight: bold;
}
.article .detail-div .el-tabs__item {
  font-size: 15px;
}
.article .detail-div .el-tabs__item:hover {
  color: #353535;
}

</style>
